<template>
  <div class="shglXQ" style="margin-left: 15px">
    <p class="shenqing">详细信息
      <!-- <el-button
        size="mini"
        type="success"
        v-show="this.queryParams.auditSteps=='2'"
        icon="el-icon-finished"
        @click="savePrice">保存</el-button> -->
      <!-- <el-button
        size="mini"
        type="danger"
        v-show="this.queryParams.auditSteps=='2'"
        style="margin-left: 20px"
        icon="el-icon-close"
        @click="handleEdit">驳回</el-button> -->
      <el-button
        size="mini"
        type="success"
        v-show="this.queryParams.auditSteps=='2'"
        icon="el-icon-guide"
        @click="handleDelete">发放</el-button>
        <!-- 返回按钮 -->
      <el-button type="primary" icon="el-icon-back" size="mini" @click="goback">返回上一页</el-button>

      <el-button type="primary"  size="mini"  @click="baocun">保存</el-button>
      <el-button size="mini" type="success" icon="el-icon-receiving" @click="print">打印</el-button>
    </p>
    <table border="1" rules="all" class="tablestyle">
      <tr>
        <td class="nameclass" >申请名称</td>
        <td class="neirongclass">{{queryParams.pickName}}</td>
        <td class="nameclass" >用途</td>
        <td class="neirongclass">{{queryParams.useing}}</td>
      </tr>
      <tr>
        <td class="nameclass"  >申请月份</td>
        <td class="neirongclass">{{queryParams.planMonth}}</td>
        <td class="nameclass" >班组</td>
        <td class="neirongclass">{{queryParams.teamName}}</td>
      </tr>
      <tr>
        <td class="nameclass" >资金来源</td>
        <td class="">
          <el-select
            v-model="queryParams.moneySource"
            placeholder="请选择"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in zjlyArr"
              :key="dict.dictCode"
              :label="dict.dictLabel"
              :value="dict.dictCode"
            />
          </el-select>
        </td>
        <td class="nameclass" >仓库</td>
        <td class="neirongclass">{{queryParams.waName}}</td>
      </tr>
      <tr>
        <td class="nameclass" >备注</td>
        <td   class="neirongclass">
          {{queryParams.note}}
        </td>
        <td class="nameclass" >提交时间</td>
        <td class="neirongclass">{{queryParams.crtTime}}</td>
      </tr>

    </table>
    <el-table  :data="this.tableListjihua" stripe style="margin-left: 15px;width: 95%;margin-top: 20px"
               border>
      <el-table-column align="center" type="index" label="序号"  width="55"  />
      <!-- <el-table-column align="center" label="科室" property="depOffName"  width="200" ></el-table-column> -->
      <el-table-column align="center" label="物料编码" property="mno" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="物料名称"  property="mname"  ></el-table-column>
      <el-table-column align="center" label="物料规格"  property="mmodel"  ></el-table-column>
      <el-table-column align="center" label="分类名称"  property="typeName" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="单位"  property="unit"  ></el-table-column>
      <el-table-column align="center" label="计划价"  property="planPrice"  ></el-table-column>
      <el-table-column align="center" label="技术参数"  property="technicalParameters" :show-overflow-tooltip="true" v-if="false"></el-table-column>
      <el-table-column align="center" label="物料状态"  property="mtype" :show-overflow-tooltip="true" width="150" v-if="false">
        <template slot-scope="scope" style="text-align: center">
          <div style="padding-left: 5px;padding-right: 5px; background:#78BF34  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='1'" >招标采购</div>
          <div style="padding-left: 5px;padding-right: 5px; background:#9E71DC ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='2'">产业协同</div>
          <div style="padding-left: 5px;padding-right: 5px;background:#DEA11E  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='3'">战略采购</div>
          <div style="padding-left: 5px;padding-right: 5px;background:#9E71DC  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='4'">询比价</div>
          <div style="padding-left: 5px;padding-right: 5px;background:#9E71DC  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='5'">长协</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="采购方式"  property="purchasingMethod" :show-overflow-tooltip="true" width="150" v-if="false">
        <template slot-scope="scope" style="text-align: center">
          <div style="background:#78BF34  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='1'" >正常</div>
          <div style="background:#9E71DC  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='2'">慎用</div>
          <div style="background:#DEA11E  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='3'">关闭</div>
          <div style="background:#9E71DC  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='4'">新增</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="需求数"  property="demandNum"  >
        <template slot-scope="scope">
          <el-input type="number" v-model="scope.row.demandNum" placeholder="" @input="xqkeydownBtn(scope.row)" :disabled="xqShow"></el-input>
        </template>
      </el-table-column>
    </el-table>

    <form id="form1" class="yincang">
      <div style="text-align: center;height: 80px;line-height: 80px;font-size: 25px">平宝公司单位领料单 </div>
      <div style="height: 40px;line-height: 40px">
        <div style="float: left;margin-left: 20px"></div>
        <div style="float: right;margin-right: 20px;width:230px">领料仓库：{{nameobj.waName}}</div>
      </div>
      <div style="height: 40px;line-height: 40px">
        <div style="float: left;margin-left: 20px">记录编号：{{timechuo}}</div>
        <div style="float: right;margin-right: 20px;width: 230px">打印日期：{{nameobj.niandy}} 年 {{nameobj.yuedy}} 月 {{nameobj.ridy}} 日</div>
      </div>
      <div style="height: 40px;line-height: 40px">
        <div style="float: left;margin-left: 20px"> 领用区队：{{nameobj.depName}}</div>
        <div style="float: right;margin-right: 20px;width: 230px">创建日期：{{nameobj.nian}} 年 {{nameobj.yue}} 月 {{nameobj.ri}} 日</div>
      </div>
      <table class="yincang" border="1" width="100%" height="106" cellspacing="0" style="border-collapse:collapse;table-layout:fixed;border:solid 1px black;">
        <tr>
          <td width="50" height="30" style="border:solid 1px black;text-align:center;font-size: 12px">序号</td>
          <td width="70" height="30" style="border:solid 1px black;text-align:center;;font-size: 12px">物资编码</td>
          <td width="51" height="30" style="border:solid 1px black;text-align:center;;font-size: 12px">物资名称</td>
          <td width="51" height="30" style="border:solid 1px black;text-align:center;;font-size: 12px">规格型号</td>
          <td width="51" height="30" style="border:solid 1px black;text-align:center;;font-size: 12px">单位</td>
          <td width="51" height="30" style="border:solid 1px black;text-align:center;;font-size: 12px">申请数量</td>
          <td width="51" height="30" style="border:solid 1px black;text-align:center;;font-size: 12px">审批数量</td>
          <td width="51" height="30" style="border:solid 1px black;text-align:center;;font-size: 12px">单价</td>
          <td width="51" height="30" style="border:solid 1px black;text-align:center;;font-size: 12px">金额</td>
          <td width="51" height="30" style="border:solid 1px black;text-align:center;;font-size: 12px">交旧领新</td>
          <td width="51" height="30" style="border:solid 1px black;text-align:center;;font-size: 12px">库管员签字</td>
          <td width="51" height="30" style="border:solid 1px black;text-align:center;;font-size: 12px">备注</td>

        </tr>

        <tr v-for="(item,index) in this.tableLatejihuab">
          <td width="50" height="16"  style="border:solid 1px black;text-align: center;font-size: 12px">{{index+1}}</td>
          <td width="70" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word">{{item.mno}}</td>
          <td width="51" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word">{{item.mname}}</td>
          <td width="51" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word">{{item.mmodel}}</td>
          <td width="50" height="16" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word">{{item.unit}}</td>
          <td width="51" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word">{{item.demandNum}}</td>
          <td width="51" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word">{{item.demandNum}}</td>
          <td width="50" height="16" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word">{{item.planPrice}}</td>
          <td width="51" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word">{{((item.demandNum)*item.planPrice).toFixed(2)}}</td>
          <td width="51" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word"></td>
          <td width="51" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word"></td>
          <td width="51" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word">{{item.note}}</td>
        </tr>
        <tr>
          <td colspan="2" width="50" height="16"  style="border:solid 1px black;text-align: center;font-size: 12px">合计</td>
          <td width="70" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word"></td>
          <td width="51" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word"></td>
          <td width="51" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word"></td>
          <td width="50" height="16" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word">{{nameobj.sqslHJ}}</td>
          <td width="51" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word">{{nameobj.sbslHJ}}</td>
          <td width="51" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word"></td>
          <td width="50" height="16" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word">{{nameobj.jineHJ}}</td>
          <td width="51" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word"></td>
          <td width="51" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word"></td>
          <td width="51" height="12" style="border:solid 1px black;text-align: center;font-size: 12px;word-break: break-word"></td>
        </tr>
      </table>
      <div style="height: 40px;line-height: 40px">
        <div style="display: inline-block;width: 33%">领用单位负责人：</div>
        <div style="display: inline-block;width: 33%">审批人：</div>
        <div style="display: inline-block;width: 33%">领料人：</div>
      </div>
    </form>
  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name: "Role",
    data() {
      return {
          //页码信息
        XQpage:undefined,
        XQsize:undefined,
        tableLatejihuab:[],
        teamName:'',
        nameobj:{
          depName:'',
          crtTime:'',
          nian:'',
          yue:'',
          sqslHJ:0,//申请数量
          sbslHJ:0,//审批数量
          jineHJ:0,//金额
          ri:''
        },
        //需求数修改
        // showXG:this.queryParams.auditSteps==2,
        //物料信息
        tableListjihua:[],
        zjlyArr:[],
        timechuo:'01',
        queryParams:{
        },
      };
    },
    computed:{
      xqShow() {
         return this.queryParams.auditSteps =='4'
      }
    },
    created() {
      console.log('接收-采购申请详情',this.$route.query)
       this.XQpage = this.$route.query.page
      this.XQsize = this.$route.query.size
      this.queryParams = this.$route.query.pp.row
      this.getWlmessage()
      this.getMessageb()
      console.log(this.xqShow)
      this.getDicts("sources_of_funding").then(response => {
        this.zjlyArr = response.data;
        console.log('response.data',response.data)
      });
    },
    methods: {
      print:function(){
        debugger
        var that = this
        var pp =  (new Date()).getTime()
        that.timechuo = pp;
        setTimeout(function () {
          var newWin = window.open(""); //新打开一个空窗口
          var imageToPrint = document.getElementById("form1"); //获取打印内容
          newWin.document.write(imageToPrint.outerHTML); //将图片添加进新的窗口
          newWin.document.close(); //在IE浏览器中使用必须添加这一句
          newWin.focus(); //在IE浏览器中使用必须添加这一句
          setTimeout(function () {
            newWin.print(); //打印
            newWin.close(); //关闭窗口
          }, 100);
        },500)

      },
      //打印数据
      getMessageb () {
        request({
          url:'material/apply/' +this.queryParams.id,
          method:'get',
        }).then(response =>{
          console.log(response)
          this.nameobj.waName = response.data.waName
          this.nameobj.depName = response.data.depName
          this.nameobj.crtTime = response.data.crtTime
          this.teamName = response.data.teamName
          var date = new Date(this.nameobj.crtTime); //获取一个时间对象
          var nian = date.getFullYear();  // 获取完整的年份(4位,1970)
          var yue = date.getMonth()+1;  // 获取月份(0-11,0代表1月,用的时候记得加上1)
          var ri = date.getDate();  // 获取日(1-31)
          if(yue<9){
            yue = '0'+yue
          }
          if(ri<9){
            ri = '0'+ri
          }

          var datedy = new Date(); //获取一个时间对象
          var niandy = datedy.getFullYear();  // 获取完整的年份(4位,1970)
          var yuedy = datedy.getMonth()+1;  // 获取月份(0-11,0代表1月,用的时候记得加上1)
          var ridy = datedy.getDate();  // 获取日(1-31)
          if(yuedy<9){
            yuedy = '0'+yuedy
          }
          if(ridy<9){
            ridy = '0'+ridy
          }
          this.nameobj.ri = ri
          this.nameobj.nian = nian
          this.nameobj.yue = yue
          this.nameobj.ridy = ridy
          this.nameobj.niandy = niandy
          this.nameobj.yuedy = yuedy
          this.tableLatejihuab = response.data.wzPickingApplyInfos
          for (var i=0;i<this.tableLatejihuab.length;i++){
            this.nameobj.sqslHJ =  this.nameobj.sqslHJ+ this.tableLatejihuab[i].demandNum
            this.nameobj.sbslHJ =  this.nameobj.sbslHJ+ this.tableLatejihuab[i].demandNum
            this.nameobj.jineHJ =  this.nameobj.jineHJ+ (this.tableLatejihuab[i].demandNum*this.tableLatejihuab[i].planPrice)
          }
          this.nameobj.jineHJ = this.nameobj.jineHJ.toFixed(2)
        })
      },
      //保存
      baocun:function(){
        // var obj = {}
        // obj.id=this.queryParams.id
        // obj.wzPickingApplyInfos = this.tableListjihua
        request({
          url: '/material/info',
          method: 'put',
          data:this.tableListjihua
        }).then(response =>{
          if(response.code =='200') {
            this.$message({
              type: 'success',
              message: '保存成功'
            });
          }
        })
      },
      //驳回
      handleEdit:function () {
        this.$confirm('确认要驳回吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.bohuiBtn()

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消驳回'
          });
        });
      },
      goback () {
        this.$router.push({path:'/suppliesLLGL/lyshGL',query:{page:this.XQpage,size:this.XQsize}});
      },
      // xqShow: function(row) {
      //    return row.auditSteps=='2'
      // },
      //获取物料物料
      getWlmessage () {
        request({
          url:'material/apply/' +this.queryParams.id,
          method:'get'
        }).then(response =>{
          this.tableListjihua = response.data.wzPickingApplyInfos
          console.log(this.tableListjihua)
        })
      },
      //需求数修改
      xqkeydownBtn (row) {
        console.log(row.demandNum)
        if(row.demandNum<0) {
          row.demandNum=0
          this.$message({
            type:'info',
            message:'需求书不能为负数'
          })
        }
      },
      //保存
      savePrice () {
        this.$confirm('确认保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
           this.save(this.tableListjihua)
        }).catch(() =>{
          this.$message({
            type: 'info',
            message: '已取消保存'
          });
        })
      },
      save (row) {
        request({
          url: '/material/apply/editsing',
          method: 'put',
          data:row
        }).then(response =>{
          if(response.code =='200') {
            this.$message({
            type: 'success',
            message: '保存成功'
          });
          }
        })
      },
      bohuiBtn:function(){
        request({
          url: '/material/apply/audit',
          method: 'put',
          data: {
            id:this.queryParams.id,
            auditSteps:3
          }
        }).then(response => {
          this.$message({
            type: 'success',
            message: '驳回成功!'
          });
          this.$router.push({path:'/suppliesLLGL/lyshGL'});
        });

      },
      //保存并发放
      handleDelete:function () {
        this.$confirm('确认要发放吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // this.save(this.tableListjihua)
         this.tongguoBtn()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发放'
          });
        });
      },
      tongguoBtn:function () {
        request({
          url: '/material/apply/audit',
          method: 'put',
          data: {
            id:this.queryParams.id,
            auditSteps:4,
            moneySource:this.queryParams.moneySource,
          }
        }).then(response => {
          this.$message({
            type: 'success',
            message: '通过成功!'
          });
          this.$router.push({path:'/suppliesLLGL/lyshGL'});
        });
      },

    }
  };
</script>
<style>
  .shglXQ .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;

  }
  .shglXQ .tablestyle {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
    width: 800px;
  }
 .shglXQ .nameclass {
   width: 164px;height: 34px;text-align: center;
  }
  .shglXQ .neirongclass {
    padding-left: 16px;
    font-size: 14px;
    width: 220px;
  }
  .shglXQ .el-input--small .el-input__inner {
    border: none;
  }
  .yincang {
    display: none;
  }
</style>
